<template>
  <div class="listTemplate lan-loadmore-body">
    <mu-appbar color="primary" class="lan-header">
      <mu-button icon slot="left"  @click="clear_S">
        <i class="iconfont angle-left iconangle-left "></i>
        <span class="lan-header-back" >返回</span>
      </mu-button>
      任务台账
      <mu-button icon slot="right" @click="searchcontroll = true">
        <i class="iconfont iconshaixuan4"></i>
      </mu-button>
    </mu-appbar>
    <!-- header 结束 -->

    <!-- 页面主体开始 -->
    <section class="t-body lan-loadmore-content no-padding">
      <mu-container ref="container" class="lan-loadmore-body" style="padding:5px;background-color:#fff;">

        <!-- 顶部 Tab 切换开始 -->
        <div>
          <!--[{id: 0, name: '进行中',}, {id: 1, name: '已结束'}, {id: 2, name: '未开始'}],-->
          <mTabs v-model="active1" :tabList="tabList1" @change="stateSwitching" position="center"></mTabs>
          <!--[{id: 1, name: '平面图'}, {id: 2, name: '列表'}],-->
          <mTabs v-model="active" :tabList="tabList" @change="handleTopTabChange"></mTabs>
        </div>
        <!-- 顶部 Tab 切换结束 -->
        <!-- 平面图开始 -->
        <div class="lan-loadmore-content lan-steper" v-if="active === 1">
          <div class="t-body">
            <mTree
              v-show="tree.data.length"
              :showTotal="true"
              :getName="'count'"
              :data="tree.data"
              :props="tree.defaultProps"
              :clickableConditions="tree.clickableConditions"
              @click="skipPage"
            ></mTree>
            <NoData v-if="!tree.data.length"/>
          </div>
        </div>
        <!-- 平面图结束 -->

        <!-- 列表开始 -->
        <list-item-card @loadListData="loadListData" v-bind:datas="data"  v-show="active === 2" ></list-item-card>
        <NoData v-if="!data.length && active === 2"/>
        <!-- 列表结束 -->
      </mu-container>
    </section>
    <!-- 页面主体结束 -->
    <!-- 筛选 -->
    <mu-dialog width="100%" transition="slide-right" fullscreen :open.sync="searchcontroll" class="lan-dialog">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" @click="searchcontroll = false">
          <i class="iconfont angle-left iconangle-left "></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        筛选条件
        <mu-button icon slot="right" @click="clearSearch">
          <span class="text">清空</span>
        </mu-button>
      </mu-appbar>
      <mu-list class="lan-dialog-body no-padding bg-default">
        <mu-form :model="form" class="mu-lan-form" :label-position="'left'" label-width="25%">
          <mu-form-item label="开始时间">
            <mu-date-input
              v-model="form.startTime"
              placeholder="请选择"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              container="bottomSheet"
              label-float
            ></mu-date-input>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>


          <mu-form-item label="结束时间">
            <mu-date-input v-model="form.endTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择" container="bottomSheet" label-float></mu-date-input>
            <i class="iconfont angle-left iconangle-right "></i>
          </mu-form-item>

          <!--<mu-form-item  label="检查人">-->
            <!--<mu-text-field v-model="form.partItemName" placeholder="请输入"></mu-text-field>-->
            <!--<i class="iconfont angle-left iconangle-right "></i>-->
          <!--</mu-form-item>-->

          <mu-form-item label="检查人" class="form-between" >
            <span class="normal-font-size form-right-text" @click="openUser(1)" >{{checkUser1?checkUser1:'请选择'}}</span>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <!--<mu-form-item  label="创建人">
            <mu-text-field v-model="form.createUser" placeholder="请输入"></mu-text-field>
            <i class="iconfont angle-left iconangle-right "></i>
          </mu-form-item>-->
          <mu-form-item label="创建人" class="form-between" >
            <span class="normal-font-size form-right-text" @click="openUser(2)" >{{checkUser2?checkUser2:'请选择'}}</span>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>

        </mu-form>
        <mu-list-item class="lan-dialog-sumit lan-block-btn-line">
          <mu-button full-width color="primary" class="lan-block-btn" @click="search">确认</mu-button>
        </mu-list-item>
      </mu-list>
    </mu-dialog>

    <Org ref="org" v-model="org" orgType="currOrgProject" @change="orgChange"
         :open="orgDialog" @open="openOrgDialog" @close="closeOrgDialog" @confirm="orgConfirm"
    ></Org>
    <mu-dialog width="360" transition="slide-bottom" fullscreen :open.sync="opens">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" @click="closeFullscreenDialog">
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        {{this.name}}
        <mu-button icon slot="right" @click="searchcontroll = true">
          <i class="iconfont iconshaixuan4"></i>
        </mu-button>
      </mu-appbar>
      <list-item-card @loadListData="loadListData" v-bind:datas="data"  ></list-item-card>
    </mu-dialog>
    <!-- 人员 -->
    <User ref="User" v-if="userOpen" :multiple="false" :open="userOpen" :orgType="'currOrgProject'" :dataScope="dataScope" @change="userChange" @close="userOpen = false"></User>
  </div>
</template>

<script>

  import Org from "@/select/org/Org.vue"
  import apis from '../../../../services/apis.js';
  import ListItemCard from './ListItemCard.vue';
  import mTree from "@/tree/mTree";
  import mTabs from "./../../../../components/tabs/mTabs";
  import User from "@/select/user/User";

  export default {
    name: 'mainPage',
    components: {
      ListItemCard,
      mTree,
      mTabs,
      Org,
      User
    },
    data () {

      return {
        checkUser1:'',
        checkUser2:'',
        userOpen:false,
        userTab:'',
        contactType:'1,2,3',
        dataScope:"project-contact",
        form: {
          startTime: '',
          endTime: '',
          partItemName: '',//检查人
          createUser:'',//创建人
        },
        name:'',
        opens:false,
        // 组织弹窗状态
        orgDialog: false,
        // 组织
        org: [],

        active1: 0,
        active: 1,
        tabList: [{id: 1, name: '平面图'}, {id: 2, name: '列表'}],
        tabList1: [{id: 0, name: '进行中',}, {id: 1, name: '已结束'}, {id: 2, name: '未开始'}],
        tree: {
          defaultProps: {
            id: "id",
            name: "name",
            children: "children"
          },
          clickableConditions: {
            all: {
              //所有的是否可以点击
              enable: true
            },
            part: {
              //部分的可以点击的条件
              prop: "orgType",
              value: [1]
            }
          },
          data: []
        },
        currentOrg: {},
        overflowDateCount: 0,
        searchcontroll: false,//筛选
        dataPool: {},
        listData: [],
        pageSize: 10,
        pageNo: 0,
        data:[],
        total:0,
        totalPage:1,
        id:'',
        obj:''
      }
    },
    mounted () {
      console.log(sessionStorage.getItem('tabs'));
      if (sessionStorage.getItem('tabs') == undefined) {
        this.active = 1;
        this.orgDialog = true;
      }else {
        this.active = Number(sessionStorage.getItem('tabs'));
        this.orgDialog = false;
      }
    },
    created () {
      let orgInfo = this.$A.GS("orgInfo");
      this.currentOrg.type = orgInfo.type;
      this.currentOrg.value = orgInfo.orgId;
      this.currentOrg.label = orgInfo.label;
      // if (this.currentOrg.type == '1') {
        this.loadTreeData();
      this.loadListData();
      // } else {
      //   this.orgDialog = true
      // }
    },
    methods: {
      userChange(value){
        console.log(value);
        if (this.userTab == 1) {
          this.checkUser1 = value[0]['employeeName'];
          this.form.partItemName = value[0]['id'];
        }else if (this.userTab == 2) {
          this.checkUser2 = value[0]['employeeName'];
          this.form.createUser = value[0]['id'];
        }
        this.userOpen =false
      },
      openUser (val) {
        this.userTab = val;
        this.userOpen =true;
      },
      clear_S () {
        sessionStorage.removeItem('tabs');
        this.openOrgDialog();
      },
      // 组织选择
      orgChange(ev) {
        let orgInfo = {
          orgId: ev[0].value,
          orgName: ev[0].label,
          type: ev[0].type
        };
        this.obj = orgInfo;
        this.loadTreeData();
        this.loadListData();
      },
      // 打开组织选择弹窗
      openOrgDialog () {
        this.orgDialog = true;
      },
      // 关闭组织选择弹窗
      closeOrgDialog () {
        this.orgDialog = false;
        this.$router.back()
      },
      // 组织选择结果确认
      orgConfirm () {
        console.log(this.org[0]);
        this.orgDialog = false;
      },
      //点击平面图 回调
      skipPage (treeRowData) {
        console.log(treeRowData);
        this.data = [];
        this.pageNo = 0;
        let obj = treeRowData;
        this.id = obj.id;
        this.loadListData();
        this.name = obj.name;
        this.opens = true;
      },
      closeFullscreenDialog () {
        this.opens = false;
      },

      loadListData () {
        if (this.pageNo > this.totalPage) {
          return false
        };
        this.pageNo += 1;
        let obj = {
          orgId: this.obj["orgId"],
          type: this.obj["type"],
          current: this.pageNo,
          size: this.pageSize,
          areaCountType:this.active1,
          areaId:this.id,
          endTime:this.form.endTime,
          startTime:this.form.startTime,
          userId:this.form.partItemName,
          createUser:this.form.createUser ,//创建人
        };
        this.$A.Go('get', '/safety/checkPlan/pageList',obj)
          .then(success => {
            if(success.code == 200) {
              let datas = success.body.rows || [];
              this.data = this.data.concat(datas);
              this.total = success.body.page.rows;
              this.totalPage = Math.ceil(this.total /this.pageSize);
              this.$closeLoading();
            }
          })
      },
      //平面图
      loadTreeData () {
        this.$openLoading();
        let params = {
          orgId: this.obj["orgId"],
          type: this.obj["type"],
          planType: this.active1,//0未完成 1已完成

          endTime:this.form.endTime,
          startTime:this.form.startTime,
          userId:this.form.partItemName,
          createUser:this.form.createUser ,//创建人
        };
        this.$A.Go("get", apis.task_parameter_tree_list, params).then(
          response => {
            this.$closeLoading();
            if (response.code == 200) {
              this.tree.data =
                response.body.treeNodeList && response.body.treeNodeList.length ? response.body.treeNodeList : [];
              this.dataPool = response.body;
              this.tabList1[0].name = `进行中${this.dataPool.inProcessPlanCount}`;
              this.tabList1[1].name = `已结束${this.dataPool.finishPlanCount}`;
              this.tabList1[2].name = `未开始${this.dataPool.unStartPlanCount}`;
            } else {
              this.tree.data = [];
            }
          },
          err => {
            this.$closeLoading();
            console.log(err);
          }
        );
      },
      //查询
      search () {
        this.data = [];
        this.pageNo=0;
        this.loadListData();
        this.loadTreeData();
        this.searchcontroll = false;
      },
      //清空
      clearSearch () {
        this.form = {
          projectId: '',
          startMeetTime: '',
          endMeetTime: '',
          meetType: '',
          meetName: '',
        }
        this.checkUser1 = '';
        this.checkUser2 = ''
      },
      //姓名判空
      splitFirstLetter (letters) {
        if (letters !== null && letters !== undefined) {
          return letters.substr(0, 1)
        }
        return '无'
      },
      //table 切换
      handleTopTabChange () {
        // console.log(this.active);
        sessionStorage.setItem("tabs",this.active);
        this.id = '';
        this.data = [];
        this.pageNo = 0;
        this.loadListData();
        // if (this.active == 1) {
        //   this.loadListData()
        // } else if (this.active == 2) {
        //   // console.log(this.active1);
        //   this.loadListData()
        // }
      },
      stateSwitching () {
        this.id = '';
        this.data = [];
        this.pageNo = 0;
        if (this.active == 1) {
          this.loadTreeData(this.active1);//平面图
        }else {
          this.loadListData(this.active1);//列表
        }
      }
    },
  }
</script>
<style lang="scss" scoped>
  .listTemplate {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    .t-header {
      height: 0.45rem;
      width: 100%;
      color: #3D3D3D;
      box-sizing: border-box;
      position: relative;
      font-weight: 700;
      background-color: #fff;
      // box-shadow: 0 2px 4px -1px rgba(0,0,0,.07), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .t-body {
      /*height: calc(100% - 0.45rem);*/
      width: 100%;
      overflow: auto;
      background-color: #F8F8F8;
    }
    .t-body + .t-footer {
      height: 0.45rem;
      width: 100%;
    }
    .t-footer + .t-body {
      height: calc(100% - 0.9rem);
    }
  }
</style>
